<template>
    <div>
        <el-form :model="form" label-width="auto" size="large">
            <el-form-item label="菜单名称">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="菜单路径">
                <el-input v-model="form.href" />
            </el-form-item>
            <el-form-item label="上级菜单">
                <el-select v-model="form.parentId" placeholder="please select your zone">
                    <el-option label="顶级菜单" :value="-1" />
                    <el-option v-for="menu in topMenus" :key="menu.id" :label="menu.name" :value="menu.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.description" />
            </el-form-item>
            <el-form-item label="图表名称">
                <el-input v-model="form.icon" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="form.shown">
                    <el-radio :value="true">是</el-radio>
                    <el-radio :value="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.orderNum" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">{{ msgText }}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { useMenus } from '@/composables/useMenus' //导入响应式数据
const { getAllMenus, onSubmit, form, topMenus, getMenuInfoById, msgText} = useMenus() //调用后，解构得到想要的东西
import { useRoute } from 'vue-router'
const route = useRoute()
getAllMenus()
getMenuInfoById(route.params.id as string) //调用获取菜单信息的方法，传入路由参数
</script>

<style scoped></style>